$style-10: (
  'offsetY': 0,
  'padding': 0,
);

@include b(custom-border) {
  @include set-component-css-var(style-10, $style-10);

  @include when(style-10) {
    position: relative;
    width: 100%;
    height: 100%;
    @include e(wrapper){
      position: absolute;
      width: 100%;
      height: calc(100% - getCssVar(style-10, 'offsetY'));
    }
    @include e(border-box) {
      z-index: 100;
      height: 0;
    }
    @include e(mask) {
      position: absolute;
      top: getCssVar(style-10, 'padding');
      left: getCssVar(style-10, 'padding');
      width:  calc(100% - 2 * getCssVar(style-10, 'padding'));
      height: calc(100% - 2 * getCssVar(style-10, 'padding') - getCssVar(style-10, 'offsetY'));
      border-radius: 10px;
    }
    @include e(border-svg) {
      @include m(container) {
        position: absolute;
        display: block;
      }
    }
    @include e(right-top) {
      right: 0;
      transform: rotateY(180deg);
    }
    @include e(left-bottom) {
      bottom: 0;
      transform: rotateX(180deg);
    }
    @include e(right-bottom) {
      right: 0;
      bottom: 0;
      transform: rotateX(180deg) rotateY(180deg);
    }
    @include e(content) {
      width: 100%;
      height: 100%;
    }
  }
}
